<template>
    <div class="activate">
        <div class="site-add">
            <div class="add-info">
            <div class="title">
                <span>Activate my site</span>
            </div>
            <el-form ref="infoform" :model="form" label-position="left" label-width="250px" >
                <!-- <el-form-item label="Federated Organization" prop="stiename">
                    <span class="info-text">{{form.federatedOrganization}}</span>
                </el-form-item> -->
                <el-form-item label="Site Name" prop="stiename">
                    <span class="info-text">{{form.siteName}}</span>
                </el-form-item>
                <el-form-item label="Institution" prop="institution">
                    <span class="info-text">{{form.institutions}}</span>
                </el-form-item>
                <el-form-item label="Role" prop="role">
                    <span class="info-text">{{form.role===1?'guest':'host'}}</span>
                </el-form-item>
                <el-form-item label="Party ID">
                    <span class="info-text">{{form.partyId}}</span>
                </el-form-item>
                <el-form-item label="Network Acess Entrances" prop="entrances">
                <span v-if='form.networkAccessEntrances' class="info-text" style="margin-top: 5px;">
                    <div style="line-height: 30px" v-for="(item, index) in form.networkAccessEntrances.split(';')" :key="index">{{item}}</div>
                </span>
                </el-form-item>
                <el-form-item label="Network Acess Exits" prop="exit">
                    <span v-if='form.networkAccessExits' class="info-text" style="margin-top: 5px;">
                        <div style="line-height: 30px" v-for="(item, index) in form.networkAccessExits.split(';')" :key="index">{{item}}</div>
                    </span>
                </el-form-item>
                <el-form-item label="Federation Key">
                    <span v-if="keyViewDefault" class="info-text">{{form.appKey}} <img src="@/assets/view_show.png" @click="keyViewDefault = !keyViewDefault" class="view" ></span>
                    <span  v-if="!keyViewDefault" class="info-text">***********************<img src="@/assets/view_hide.png" @click="keyViewDefault = !keyViewDefault" class="view" ></span>
                </el-form-item>
                <el-form-item label="Federation Secret">
                    <span v-if="secretViewDefault" class="info-text">{{form.appSecret}} <img src="@/assets/view_show.png" @click="secretViewDefault = !secretViewDefault" class="view" ></span>
                    <span  v-if="!secretViewDefault" class="info-text">***********************<img src="@/assets/view_hide.png" @click="secretViewDefault = !secretViewDefault" class="view" ></span>
                </el-form-item>
                <el-form-item label="Registration Link">
                    <el-popover
                        placement="top"
                        width="400"
                        trigger="hover"
                        :content="form.registrationLink">
                        <span slot="reference" class="link-text">{{form.registrationLink}}</span>
                    </el-popover>
                </el-form-item>
            </el-form>
            <div class="Submit">
                <el-button type="primary" @click="modifyAction">Confirm and Activate</el-button>
            </div>
            </div>
            <el-dialog :visible.sync="confirmdialog" class="site-toleave-dialog" width="700px" :close-on-click-modal="false" :close-on-press-escape="false">
                <i class="el-icon-success"></i>
                <div class="line-text-success">Activate successfully !</div>
                <div class="line-text-one">Before using federated learning modeling,</div>
                <div class="line-text-two">you must ensure that FATE is deployed correctly.</div>
                <div class="dialog-footer">
                    <el-button class="sure-btn" type="primary" @click="confirm">OK</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { register } from '@/api/welcomepage'
import { decode64, utf8to16 } from '@/utils/base64'

export default {
    name: 'home',
    components: {},
    data() {
        return {
            keyViewDefault: false,
            secretViewDefault: false,
            confirmdialog: false, //
            form: {}
        }
    },
    watch: {},
    computed: {
        ...mapGetters(['organization'])
    },

    beforeDestroy() {},
    created() {
        // this.$store.dispatch('selectEnum')
    },
    mounted() {
        let Url = utf8to16(decode64(this.$route.query.registerUrl))
        let newStr = Url.split('st=')[1].replace(new RegExp('\\\\', 'g'), '')
        let obj = { ...JSON.parse(newStr) }
        let fromObj = {}
        fromObj.appKey = obj.secretInfo.key
        fromObj.appSecret = obj.secretInfo.secret
        fromObj.federatedUrl = `${Url.split('//')[0]}//${Url.split('//')[1].split('/')[0]}`
        fromObj.registrationLink = this.$route.query.registerUrl // 回传加密
        fromObj.federatedOrganization = obj.federatedOrganization
        fromObj.id = obj.id
        fromObj.institutions = obj.institutions
        fromObj.networkAccessEntrances = obj.networkAccessEntrances
        fromObj.networkAccessExits = obj.networkAccessExits
        fromObj.partyId = obj.partyId
        fromObj.role = obj.role
        fromObj.siteName = obj.siteName
        this.form = { ...fromObj }
    },
    methods: {

        modifyAction() {
            let data = { ...this.form }
            register(data).then((res) => {
                this.confirmdialog = true
                this.$store.dispatch('setSiteStatus', 'registered')
                console.log('激活成功并注册')
            })
        },
        // OK
        confirm() {
            this.$router.push({
                name: 'auto',
                query: {
                    siteName: this.form.siteName,
                    federatedId: this.form.federatedId || this.form.federatedOrganization,
                    partyId: this.form.partyId
                }
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
@import 'src/styles/activate.scss';
</style>
